<template>
  <div class="home-recommend">
    <ul v-if="recommend.length!==0">
      <li v-for="(item, index) in recommend" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt>
          <span>{{item.title}}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeRcommend",
  props: {
    recommend: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {},
  data() {
    return {};
  },
  methods: {
    // *******************************网络请求*******************************
    // *******************************逻辑处理*******************************
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import ; 引入公共css类
.home-recommend {
  ul {
    display: flex;
    flex-flow: row nowrap;
    li {
      flex: 1;
      a {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        text-decoration: none;
        color: #666;
        img {
          margin: 5px 0;
          width: 80%;
        }
      }
    }
  }
}
</style>